//轮播图效果
var lbt = document.getElementById("lbt");//轮播图大盒子
var btn_left = document.getElementById("btn_left");//左边的按钮
var btn_right = document.getElementById("btn_right");//右边的按钮
var lbt_list = document.getElementById("lbt_list");//ul节点
var lbt_content = document.getElementById("lbt_content");//装轮播图图片的盒子
ajax({
	method:"get",
	url:"../client/lbt.json",
	isAsyc:true,
	success:function(data){
		var arr = eval(data);
		createLbtDom(arr);
		lbtEffect();
	},
	error:function(mes){
		alert(mes);
	}
})
function createLbtDom(arr){
	for(var i = 0,len = arr.length;i<len;i++){
		var lbt_div = document.createElement("div");
		if(i==0){
			lbt_div.className="lbt_item active default";
		}else{
			lbt_div.className="lbt_item";
		}
		lbt_div.innerHTML = '<a href="'+arr[i].imgUrl+'">'+
									'<img src="'+arr[i].imgSrc+'" /> '+
								'</a>';
		lbt_content.appendChild(lbt_div);
		var lbt_li = document.createElement("li");
		if(i==0){
			lbt_li.className="active";
		}else{
			lbt_li.className="";
		}
		lbt_list.appendChild(lbt_li);
	}
}
function lbtEffect(){
	var lbt_li = document.querySelectorAll(".lbt ul li");//li节点
	var lbt_item = lbt_content.getElementsByTagName("div");//lbt里面的图片
	var currentIndex = 0;
	function common(){
		for(var j = 0;j<lbt_li.length;j++){
			lbt_li[j].className = "";
			lbt_item[j].className = "lbt_item";
			lbt_item[j].style.opacity = 0;
			lbt_item[j].style.filter = "alpha(opacity==0)";
		}
		lbt_li[currentIndex].className="active";
		lbt_item[currentIndex].className= "lbt_item active";
		animate(lbt_item[currentIndex],{opacity:100},50);
	}
	for(var i = 0;i<lbt_li.length;i++){
		lbt_li[i].index = i;
		lbt_li[i].onclick = function(){
			currentIndex = this.index;
			common();
		}
	}
	function fn(){
		currentIndex++;
		currentIndex%=5;
		common();
	}
	var timer ;
	function gotoplay(){
		timer = setInterval(function(){
			fn();
		},2000);
	}
	gotoplay();
	lbt.onmouseenter = function(){
		clearInterval(timer);
	}
	lbt.onmouseleave = function(){
		gotoplay();
	}
	btn_left.onmouseenter = function(){
		this.className="btn_left active";
		btn_left.onclick = function(){
			currentIndex--;
			if(currentIndex<0){
				currentIndex=lbt_li.length-1;
			}
			common();
		}
	}
	btn_left.onmouseleave = function(){
		this.className = "btn_left";
	}
	btn_right.onmouseenter = function(){
		this.className="btn_right active";
		btn_right.onclick = function(){
			currentIndex++;
			if(currentIndex>lbt_li.length-1){
				currentIndex=0;
			}
			common();
		}
	}
	btn_right.onmouseleave = function(){
		this.className = "btn_right";
	}
}
/*------------------------------star部分-------------------------------*/
var star_lbt_item = document.getElementById("star_lb_item");//装轮播图的大盒子
ajax({
	method:"get",
	url:"../client/star.json",
	isAsyc:true,
	success:function(data){
		var arr = eval(data);
		createStar(arr);
		starEvent();
	},
	error:function(mes){
		alert(mes);
	}
})
//创建节点
function createStar(arr){
	var star_div = document.createElement("div");
	star_div.className = "star_lbt";
	star_lbt_item.appendChild(star_div);
	function demo(i){
		var star_dl = document.createElement("dl");
			star_dl.className = "star_dl"+(i%5+1);
			star_dl.innerHTML = '<dt><a href="'+arr[i].imgUrl+'"><img src="'+arr[i].imgSrc+'"/></a></dt>'+
								'<dd>'+
									'<a href="'+arr[i].imgUrl+'">'+arr[i].name+'</a>'+
									'<h1>'+arr[i].desc+'</h1>'+
									'<span>'+arr[i].price+'</span>'+
								'</dd>';
			star_div.appendChild(star_dl);
	}
	for(var i = 0,len = arr.length;i<len;i++){//创建第一个div
		if(i<=(parseInt(arr.length/2)-1)){
			demo(i);
		}
	}
	if(i>arr.length/2-1){//另外创建一个div
		var star_div = document.createElement("div");
		star_div.className = "star_lbt";
		star_lbt_item.appendChild(star_div);
		for(var i = arr.length/2-1,len = arr.length;i<len;i++){
			if(i>(arr.length/2-1)&&i<=arr.length-1){
				demo(i);
			}
		}	
	}
}
//事件
function starEvent(){
	var starLeft = document.getElementById("stbtn_left");//左边按钮
	var starRight = document.getElementById("stbtn_right");//右边按钮
	var starItem = star_lbt_item.children;
	var StarWidth = starItem[0].offsetWidth;//要切换的大小
	var starBigbox = document.getElementById("star_bottom");//大盒子
	var index = 0;
	starLeft.onmouseenter = function(){
		this.style.color = "#ff6709";
		this.onclick = function(){
			starLeft.style.color="#e0e0e3";
			index--;
			if(index<0){
				index=0;
			}
			var left0 = -index*StarWidth;
			animate(star_lbt_item,{left:left0},10);
		}
	}
	starLeft.onmouseleave = function(){
		this.style.color="#e0e0e3";
	}
	starRight.onmouseenter = function(){
		this.style.color = "#ff6709";
		this.onclick = function(){
			this.style.color="#e0e0e3";
			index++;
			if(index>starItem.length-1){
				index=starItem.length-1;
			}
			var left0 = -index*StarWidth;
			animate(star_lbt_item,{left:left0},10);
		}
	}
	starRight.onmouseleave = function(){
		this.style.color="#e0e0e3";
	}
	var timer;
	function gotoplay(){
		timer = setInterval(function(){
			index++;
			if(index>starItem.length-1){
				index=0;
			}
			var left0 = -index*StarWidth;
			animate(star_lbt_item,{left:left0},10);
		},5000);
	}
	gotoplay();
	starBigbox.onmouseenter = function(){
		clearInterval(timer);
	}
	starBigbox.onmouseleave = function(){
		gotoplay();
	}
}
